<template>
  <div id="map"></div>
  <div class="zoombtn">
    <el-button type="primary" @click="zoom_out">Zoom out</el-button>
    <el-button type="primary" @click="zoom_in">Zoom in</el-button>
  </div>
</template>

<script setup>
import Tianditu from '@/utils/Tianditu'
import { onMounted } from 'vue'
import { Map, View } from 'ol'


const TDT = new Tianditu()
const vecLyrGrp = TDT.createTileLayerGroup('vec', true)
let map = null
onMounted(() => {
  map = new Map({
    layers: [vecLyrGrp],
    target: 'map',
    view: new View({
      center: [12953941.4, 4852833.2],
      zoom: 5,
      projection: 'EPSG:3857'
    }),
  })
})

const zoom_in = () => {
  const view = map.getView()
  const zoom = view.getZoom()
  view.setZoom(zoom + 1)
}
const zoom_out = () => {
  const view = map.getView()
  const zoom = view.getZoom()
  view.setZoom(zoom - 1)
}
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}

.zoombtn {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>